<template>
  <ul class="sudoku">
    <li>
      <div>
        <img src="../../assets/images/brandLady.png" alt="" />
      </div>
      <p>贵妇牌</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandevaluate.png" alt="" />
      </div>
      <p>评价馆</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandIngredient.png" alt="" />
      </div>
      <p>成分党</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandSensitivity.png" alt="" />
      </div>
      <p>敏感肌</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandChinamade.png" alt="" />
      </div>
      <p>国货馆</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandJapKorea.png" alt="" />
      </div>
      <p>日韩馆</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandAmerica.png" alt="" />
      </div>
      <p>美洲馆</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandEurope.png" alt="" />
      </div>
      <p>欧洲馆</p>
    </li>
    <li>
      <div>
        <img src="../../assets/images/brandElse.png" alt="" />
      </div>
      <p>其他地区</p>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.sudoku {
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 208px;
    img {
      width: 208px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
      padding: 25px 0 25px;
    }
  }
}
</style>
